<template>
  <div>
    <div style="margin-block-end: 32px">
      <VAvatar
        color="#000"
        icon="tabler-user"
        style="margin-inline-end:8px"
      />
      <span style=" position: relative; inset-block-start: -20px;margin-inline-start: 3px">
        <b>你</b>
      </span>
      <div
        class="flex px-2 py-4 sm:px-4"
        style=" margin-block-start: -20px;margin-inline-start: 32px; padding-block-start: 0"
      >
        <div class="flex max-w-3xl items-center">
          <p>{{ record.msg }}</p>
        </div>
      </div>
    </div>

    <MessageAI :record="record"></MessageAI>
  </div>
</template>

<script setup>
import { ref } from "vue";
import MessageAI from "./MessageAI.vue";
const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
});

const record = ref(props.record);
</script>
